<template>
  <div class="pane-account">
    <el-form
      label-width="60px"
      :rules="accountRules"
      :model="account"
      size="large"
      status-icon
      ref="formRef"
    >
      <el-form-item label="账号" prop="name">
        <el-input v-model="account.name" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="account.password" type="password" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { localCache } from "@/utils/cache"
import { LOGIN_TOKEN } from "@/global/constants"
import { reactive, ref } from "vue"
import type { ElForm, FormRules } from "element-plus"
import { ElMessage } from "element-plus"
import useLoginStroe from "@/stores/login/login"
// import { accountLoginRequest } from "@/service/login/login"
const account = reactive({
  name: localCache.getCache("name"),
  password: localCache.getCache("password")
})

// 2.定义校验规则
const accountRules: FormRules = {
  name: [
    { required: true, message: "必须输入帐号信息~", trigger: "blur" },
    {
      pattern: /^[a-z0-9]{6,20}$/,
      message: "必须是6~20数字或字母组成~",
      trigger: "blur"
    }
  ],
  password: [
    { required: true, message: "必须输入密码信息~", trigger: "blur" },
    {
      pattern: /^[a-z0-9]{3,}$/,
      message: "必须是3位以上数字或字母组成",
      trigger: "blur"
    }
  ]
}
//登录逻辑
const formRef = ref<InstanceType<typeof ElForm>>()
const loginStroe = useLoginStroe()
// 执行账号的登录信息
function LoginAction(remPassword: boolean) {
  formRef.value?.validate((valid) => {
    // accountLoginRequest(account).then((res)=>{
    //   console.log(res.data)
    // })
    // console.log(valid)

    if (valid) {
      // console.log("pane-account", account.name, account.password)
      loginStroe.loginAccountAction(account).then((res) => {
        //是否记住密码
        if (remPassword) {
          localCache.setCache("name", account.name)
          localCache.setCache("password", account.password)
        }else{
          localCache.removeCache("name")
          localCache.removeCache("password")
        }
      })
    } else {
      ElMessage.error("请您输入正确的账号密码再登录")
    }
  })

  // return account
}
defineExpose({
  LoginAction
})
</script>
<style scoped lang="less"></style>
